<template>
  <el-dialog v-model="visible" width="300px" :append-to-body="true" custom-class="wechat-card-mark" title="加微信" @close="close">
        <el-row class="row-item">
            <span class="row-tips">微信号：</span>
            <span class="row-data">{{ params.wechatCode }}</span>
        </el-row>
        <el-row class="row-item">
            <span class="row-tips">微信二维码：</span>
            <el-image :src="params.wechatQrcode" style="width:150px;height:150px;border:1px solid #f5eeee;border-radius:8px" fit="cover" />
        </el-row>
  </el-dialog>
</template>

<script>
import { computed, toRefs } from 'vue'
export default {
    name: 'WechatCard',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        params: {
            type: Object,
            default() {
                return {
                    wechatCode: '',
                    wechatQrcode: ''
                }
            }
        }
    },
    emits: ['update:dialogVisible'],
    setup(props, context) {
        const { dialogVisible } = toRefs(props)
        const visible = computed({
            get: () => dialogVisible.value,
            set: val => {
                context.emit('update:dialogVisible', val)                
            }
        })
        const close = () => {
            context.emit('update:dialogVisible', false)
        }
        return {
            visible,
            close
        }
    }
}
</script>

<style lang="scss" scoped>
.row-item{
    padding-top: 20px;
    display: flex;
    align-items: stretch;
    &:first-child{
        padding-top: 0;
    }
    .row-tips{
        width: 85px;
        text-align: right;
        color: var(--el-text-color-regular);
        font-size: 13px;
    }
    .row-data{
        flex: 1;
        overflow: hidden;
        color: var(--el-text-color-primary);
    }
}
</style>